<template>
    <div>
        <el-form ref="form" :rules="rules" :model="form" label-width="100px" :label-position="labelPosition"
                 style="margin-left: 5%;margin-right: 5%" id="form-creditor">
            <el-form-item label="债权人姓名 ：" prop="name">
                <el-input v-model="form.name" @change="onNameChange"  :disabled="formVisible"></el-input>
            </el-form-item>
            <el-form-item label="证件类型 ：">
                <el-select v-model="form.idType" placeholder="请选择证件类型"  :disabled="formVisible">
                    <el-option label="身份证" value="身份证"></el-option>
                    <!--<el-option label="护照" value="护照"></el-option>-->
                </el-select>
            </el-form-item>
            <el-form-item label="证件号码 ：" prop="idcard">
                <el-input v-model="form.idcard"  :disabled="formVisible"></el-input>
            </el-form-item>
            <el-form-item label="手机号 ：" prop="mobile">
                <el-input v-model="form.mobile"  :disabled="formVisible"></el-input>
            </el-form-item>
            <el-form-item label="邮箱 ：">
                <el-input v-model="form.email"  :disabled="formVisible"></el-input>
            </el-form-item>
            <el-form-item label="约定送达地址 ：" prop="address">
                <el-input v-model="form.address"></el-input>
            </el-form-item>
            <el-form-item label="联系电话 ：">
                <el-input v-model="form.tel"  :disabled="formVisible"></el-input>
            </el-form-item>
            <el-form-item label="证件照背面或证件照一 ：">
                <camera :src="form.idcardFront" :target="getIdCardHeadValue"
                        @getIdCardHeadValue="getIdCardHead"></camera>
            </el-form-item>
            <el-form-item label="证件照正面或证件照二 ：">
                <camera2 :src="form.idcardReverse" :target="getIdCardTailValue"
                         @getIdCardTailValue="getIdCardTail"></camera2>
            </el-form-item>
            <el-form-item label="开户行 ：" prop="bankName">
                <div>
                    <el-input v-model="form.bankName" placeholder="例如：XXX银行XXXX支行"  :disabled="formVisible"
                              style="width: 85%; margin-right: 5%"></el-input>
                    <el-tooltip class="item" effect="dark" content="请输入银行卡开户行支行信息，例如XXX银行XXXX支行。（支行信息可通过银行卡背面客户服务热线查询。）"
                                placement="bottom-end">
                        <span class="el-icon-info"></span>
                    </el-tooltip>
                </div>
            </el-form-item>
            <el-form-item label="银行帐号 ：" prop="bankAccount">
                <el-input v-model="form.bankAccount"  :disabled="formVisible"></el-input>
            </el-form-item>
            <el-form-item label="户名 ：" prop="bankUname">
                <el-input v-model="form.bankUname" disabled></el-input>
            </el-form-item>
            <el-form-item label="是否参加债权人大会: " >
                <el-select v-model="form.attendState" placeholder="请选择"  >
                    <el-option
                            v-for="state in attendStateList"
                            :key="state.value"
                            :label="state.value"
                            :value="state.value">
                    </el-option>
                </el-select>
            </el-form-item>

            <div v-show="especially">
                <el-form-item label="真实债权人名称 ：" prop="specialCreditor">
                    <el-input v-model="form.specialCreditor"  :disabled="formVisible"></el-input>
                </el-form-item>
                <el-form-item label="特别申报说明 ：">
                    <el-input type="textarea" v-model="form.specialNote"  :disabled="formVisible"
                              :autosize="{ minRows: 4, maxRows: 10}"></el-input>
                </el-form-item>
                <el-form-item label="特别申报文件 ：">
                    <el-table
                            :data="especiallyFileList"
                            border
                            style="width: 100%"
                            @cell-click="downloadFile">
                        <el-table-column
                                prop="name"
                                label="文件名">
                        </el-table-column>
                        <el-table-column
                                prop="updateDate"
                                label="操作"
                                width="95px">
                            <template slot-scope="scope">
                                <el-button
                                        v-if="scope.row.type == 1"
                                        size="mini"
                                        type="text"
                                        @click="deleteFile(scope.row)">删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <upload-file @getFileList="uploadFile" style="margin-left: 5%;"  :disabled="formVisible"></upload-file>
                </el-form-item>
            </div>
        </el-form>
        <div style="width: 100%; text-align: center">
            <el-button type="primary" @click="nextPage('form')" style="width: 60%">{{creditorButton}}</el-button>
        </div>
    </div>
</template>

<script>
    import Camera from '../../upload/upload-image.vue'
    import Camera2 from '../../upload/upload-image_2.vue'
    import UploadFile from '../../upload/upload-button-text.vue'
    import conf from 'assets/js/conf.js'
    import util from 'assets/js/util.js'

    export default {
        data() {
            return {
                getIdCardHeadValue: 'getIdCardHeadValue',
                getIdCardTailValue: 'getIdCardTailValue',
                idCardHead: false,
                idCardTail: false,
                especiallyFileList: [],
                labelPosition: 'top',
                specialCreditor: '',
                specialNote: '',
                formVisible: false,
                attendState:'不确定',
                attendStateList: [
                    {
                        value: '不确定'
                    }, {
                        value: '参加现场会议'
                    }, {
                        value: '参加在线会议'
                    },
                ],
                rules: {
                    name: [
                        {required: true, message: '请输入姓名', trigger: 'blur'},
                        {min: 2, max: 20, message: '请输入正确格式的姓名', trigger: 'blur'}
                    ],
                    idcard: [
                        {required: true, message: '请输入身份证号码', trigger: 'blur'},
                        {min: 18, max: 18, message: '请输入正确的身份证号码', trigger: 'blur'}
                    ],
                    mobile: [
                        {required: true, message: '请输入手机号', trigger: 'blur'},
                        {pattern: /^1\d{10}$/, message: '请输入正确的手机号'}
                    ],
                    address: [
                        {required: true, message: '请输入地址', trigger: 'blur'},
                    ],
                    bankName: [
                        {required: true, message: '请输入银行', trigger: 'blur'}
                    ],
                    bankAccount: [
                        {required: true, message: '请输入银行账号', trigger: 'blur'},
                    ],
                    bankUname: [
                        {required: true, message: '请输入户名', trigger: 'blur'},
                    ]
                }
            }
        },
        props: [
            'form',
            'especially',
            'creditorButton'
        ],
        mounted() {
            if (this.form.state === 1) {
                this.formVisible = true;
            }

            if (this.form.idcardFront !== '-1')
                this.idCardHead = true;
            if (this.form.idcardReverse !== '-1')
                this.idCardTail = true;

            if (parseInt(util.getUrlParam(document.location.href, 'agentType')) === 2) {
                this.rules.specialCreditor = [
                    {required: true, message: '请输入真实债权人名称', trigger: 'blur'},
                ];
                const _self = this;
                util.ajax({
                    url: '/file/getFileList',
                    params: {eids: this.form.specialFileIds},
                    success: function (data) {
                        data.data.forEach(_file => _self.especiallyFileList.push({
                            id: _file.id,
                            name: _file.name,
                        }))
                    },
                });
            }
        },
        methods: {
            uploadFile: function (file) {
                if (this.especiallyFileList.length > 30) {
                    alert('资料数量太多了, 请于线下邮寄');
                    return;
                }
                this.especiallyFileList.push({
                    id: file.id,
                    count: this.especiallyFileList.length + 1,
                    name: '特别申报证明' + (this.especiallyFileList.length + 1),
                });
                if (this.form.specialFileIds === '')
                    this.form.specialFileIds = file.id;
                else
                    this.form.specialFileIds = this.form.specialFileIds + ',' + file.id;
            },
            nextPage: function (form) {
                if (!conf.inDevelop) {
                    if (!this.idCardHead) {
                        alert('请上传您的证件照背面或证件照一')
                        return
                    }
                    if (!this.idCardTail) {
                        alert('请上传您的证件照正面或证件照二')
                        return
                    }
                    const _self = this;
                    this.$refs[form].validate((valid) => {
                        if (valid) {
                            _self.form.idType = _self.matchType(_self.form.idType);
                            _self.$emit('nextPage', _self.form)
                        } else {
                            alert('您输入的信息有误!!');
                            return false
                        }
                    })
                } else {
                    this.form.idType = this.matchType(this.form.idType);
                    this.$emit('nextPage', this.form)
                }
            },

            getIdCardHead: function (file) {
                this.idCardHead = true;
                this.form.idcardFront = file;
            },
            getIdCardTail: function (file) {
                this.idCardTail = true;
                this.form.idcardReverse = file;
            },
            onNameChange: function () {
                this.form.bankUname = this.form.name;
            },
            downloadFile: function (row, column, cell, event) {
                if (column.label === '操作')
                    return;
                this.fileUrl = conf.baseUrl + '/file/get/' + row.id + '?type=1';
                this.fileTitle = row.name;
                if (row.type === 0) {
                    this.fileType = true;
                } else {
                    this.fileType = false;
                }
                this.fileVisible = true;
            },
            matchType: function (idType) {
                let type = 0;
                switch (idType) {
                    case '身份证':
                        type = 1;
                        break;
                    case '护照':
                        type = 3;
                        break;
                    default:
                        break
                }
                return type
            },
        },
        components: {
            Camera,
            Camera2,
            UploadFile
        }
    }
</script>
<style>
    .el-form-item__label {
        line-height: 0
    }
</style>
